<template>
  <a-row align="middle" justify="space-between">
    <SearchGroup
      :label-option="labelOption"
      @handleSearch="loadData(1)"
      @handle-reset="reset"
      :searchOption="filterOption"
      :resetHidden="false"
    />
  </a-row>
  <a-table
    class="tablstyle"
    rowKey="id"
    :scroll="{ x: 1200 }"
    bordered
    :loading="loading"
    :pagination="false"
    :dataSource="list"
    :columns="columns"
  >
    <template #bodyCell="{ column, index, record }">
      <template v-if="column.dataIndex == 'index'">
        {{ (curPage - 1) * pageSize + (index + 1) }}
      </template>
      <template v-if="column.dataIndex == 'requestBody'">
        <div class="max-h-40 overflow-y-auto text-left break-all"> {{ record.requestBody }} </div>
      </template>
    </template>
  </a-table>
  <a-pagination
    class="pagination"
    :show-total="total => `共 ${total} 条`"
    :show-size-changer="false"
    show-quick-jumper
    v-model:current="curPage"
    v-model:pageSize="pageSize"
    :total="total"
  />
</template>
<script lang="ts" setup>
import { ref, onMounted, watch } from 'vue'
import { getQueryPySubmitLog } from '/@/api/organization/subjectManage'
import dayjs from 'dayjs'
import { useList } from '/@/hooks/web/useList'

const columns = ref([
  {
    title: '序号',
    dataIndex: 'index',
    key: 'index',
    align: 'center',
    width: 70,
    fixed: true,
  },
  {
    title: '操作名',
    dataIndex: 'title',
    key: 'title',
    align: 'center',
    width: 180,
  },
  {
    title: '响应结果',
    dataIndex: 'resultMsg',
    key: 'resultMsg',
    align: 'center',
    ellipsis: true,
    width: 180,
  },
  {
    title: 'uri',
    dataIndex: 'uri',
    key: 'uri',
    align: 'center',
    width: 180,
  },
  {
    title: '操作用户',
    dataIndex: 'createUser',
    key: 'createUser',
    align: 'center',
    width: 140,
    customRender: ({ record }) => {
      return `(${record.jsxm})${record.account}`
    },
  },
  {
    title: '客户端Ip',
    dataIndex: 'clientIp',
    key: 'clientIp',
    align: 'center',
    width: 125,
  },
  {
    title: '请求参数',
    dataIndex: 'requestParams',
    key: 'requestParams',
    align: 'center',
    width: 300,
  },
  {
    title: '请求结果',
    dataIndex: 'requestBody',
    key: 'requestBody',
    align: 'center',
    customRender: ({ record }) => {
      return JSON.stringify(record.requestBody)
    },
    width: 700,
  },
  {
    title: 'code',
    dataIndex: 'resultCode',
    key: 'resultCode',
    align: 'center',
    width: 60,
  },
  {
    title: '操作时长',
    dataIndex: 'operateMs',
    key: 'operateMs',
    align: 'center',
    width: 80,
    customRender: ({ record }) => {
      return `${record.operateMs}(ms)`
    },
  },
  {
    title: '操作时间',
    dataIndex: 'createTime',
    key: 'createTime',
    align: 'center',
    width: 160,
    customRender: ({ record }) => {
      return dayjs(record.createTime).format('YYYY-MM-DD HH:mm:ss')
    },
  },
])
const labelOption = ref([
  { name: '操作人', key: 'createUserNickname', labelWidth: 60, inputWidth: 180 },
  { name: '教师工号', key: 'jsgh', labelWidth: 80, inputWidth: 180 },
  { name: '操作名称', key: 'title', labelWidth: 80, inputWidth: 180 },
  { name: '操作时间', key: 'startTime_endTime', labelWidth: 80, inputWidth: 180, type: 'Time' },
])

const { reset, loadData, filterOption, curPage, total, pageSize, list, loading } =
  useList(getQueryPySubmitLog)

watch(
  () => filterOption.value.startTime_endTime,
  e => {
    if (e) {
      filterOption.value.startTime = dayjs(e[0]).format('YYYY-MM-DD HH:mm:00')
      filterOption.value.endTime = dayjs(e[1]).format('YYYY-MM-DD HH:mm:59')
    } else {
      filterOption.value.startTime = void 0
      filterOption.value.endTime = void 0
    }
  }
)

onMounted(async () => {})
</script>
<style lang="less" scoped>
.tablstyle {
  padding: 15px 0;
}
</style>
<style lang="less">
.teacher-info {
  .ant-pagination {
    margin-top: 20px;
  }
}
</style>
